<script setup lang="ts">
import createImageIdsAndCacheMetaData from '@/helpers/createImageIdsAndCacheMetaData'
import { ref } from 'vue'
import MprView from '@/components/MprView.vue'
import SetImageSource from '@/views/components/SetImageSource.vue'

let imageIdsRef = ref()


const prefix = 'mpr-viewer-network'
const ids = {
  toolsGroupId: prefix,
  viewportId1: `${prefix}-viewportId1`,
  viewportId2: `${prefix}-viewportId2`,
  viewportId3: `${prefix}-viewportId3`,
  volumeId:`${prefix}-volumeId`,
  renderingEngineId: `${prefix}-renderEngine`,
}
const confirmSource = async (dicomSource) => {
  imageIdsRef.value = await createImageIdsAndCacheMetaData(dicomSource)
}
</script>
<template>
  <div class="w-full h-full grid grid-rows-2 grid-cols-4 grid-flow-col-dense">
    <div
      class="flex flex-col justify-center">
      <p>tips:</p>
      <ul>
        <li>1. reset camera 包含重置：PAN、ZOOM、FLIP_H/V</li>
        <li>2. reset properties 包含重置： invert colorMap window rotate</li>
      </ul>
    </div>
    <set-image-source class="row-start-2" @submit="confirmSource" />
    <div class="row-span-2 col-span-3 ml-[5px]">
      <mpr-view :imageIds="imageIdsRef" :ids="ids" />
    </div>
  </div>

</template>

<style scoped>
.lt {
  @apply col-span-1 row-span-1 row-start-1 border-4 relative
}

.lb {
  @apply col-span-1 row-span-1 row-start-2 border-4  relative
}

.rt {
  @apply row-span-2 row-start-1 border-4  relative
}
</style>
